<!-- 一个很牛逼的代码编辑器 -->
<!-- 官方文档https://microsoft.github.io/monaco-editor/ -->
<div id="container"  style="width:100%;height:600px;border:1px solid grey"></div>
<div>
    <button onclick="a()">撤销</button>
    <button onclick="b()">恢复</button>
    <button onclick="c()">获取代码</button>
    <button onclick="d()">设置代码</button>
</div>
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/third_part/monaco-editor/vs/loader.js"></script>

<script>
    var editor=null;
    require.config({
        paths: { 'vs': 'https://res.dcdev.net/dcdev/v1.0.6/assets/third_part/monaco-editor/vs' }
    });
    require(['vs/editor/editor.main'], function() { 
        //创建编辑器
        editor = monaco.editor.create(
            document.getElementById('container'),
            { 
                value: ['function x() {','\tconsole.log("Hello world!");','}'].join('\n'),
                language: 'html'
            });

        //监听编辑框内容变化
        editor.onDidChangeModelContent((e) => { 
            console.log(e)   
        });

        //获取编辑框内容
        editor.getValue();

        //设置编辑框内容 
        //editor.setValue("function func(){\nconsole.log("hello"\n}");

    });
    function a (){
        editor.getModel().undo();
    }
    function b (){
        editor.getModel().redo();
    }
    function c (){
        console.log(editor.getValue());
        alert(editor.getValue());
    }
    function d (){
        editor.setValue("<h1>设置内容</h1>");
    }
</script>
</body>
</html>